<template>
  <div class="availableQuota">
    <div class="function">
      <div>
        <a-button type="primary" class="btn" :size="size">
          添加配额流水
        </a-button>
        <a-button type="primary" class="btn" :size="size">
          添加履约记录
        </a-button>
      </div>
      <div class="search_box_right">
        <a-form @keyup.enter.native="searchQuery">
          <a-form-item class="search_box_right">
            <a-input-search
              placeholder="配额流水号"
              v-model="queryParam.id"
              @search="searchQuery"
            />
          </a-form-item>
        </a-form>
      </div>
    </div>
    <div class="total">
      已筛选
      <div class="blue">0</div>
      项 配额变更总计：
      <div class="black">0</div>
      &nbsp;吨 ；交易金额总计：
      <div class="black">￥0</div>
      &nbsp; &nbsp;
      <div class="blue">重置</div>
    </div>
    <!-- 配额总览 -->
    <a-table
      ref="table"
      size="middle"
      :scroll="{ x: true }"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      class="j-table-force-nowrap"
    >
      <span slot="quotaType" slot-scope="record">
        {{ record.quotaType == 1 ? "历史盈余配额" : "政府分配配额" }}
      </span>
      <span slot="changeType" slot-scope="record">
        <span v-if="record.changeType == 1" style="color: rgb(226, 65, 86)"
          >卖出</span
        >
        <span
          v-else-if="record.changeType == 2"
          style="color: rgb(64, 158, 255)"
          >新增</span
        >
        <span
          v-else-if="record.changeType == 3"
          style="color: rgb(101, 205, 111)"
          >买入</span
        >
        <span v-else>履约</span>
      </span>
      <span slot="productType" slot-scope="record">
        <span>{{ record.productType }}</span>
      </span>
      <span slot="action" slot-scope="record">
        <a @click="handleEdit2(record)">编辑</a>
      </span>
    </a-table>
  </div>
</template>

<script>
import { quotaList } from "@/api/assets.js";
import { ListMixin } from "@/mixins/ListMixin";
export default {
  mixins: [ListMixin],

  data() {
    return {
      size: "",
      url: {
        list: "/asset/quota/list",
      },
      columns: [
        {
          title: "配额流水号",
          align: "center",
          dataIndex: "id",
        },
        {
          title: "配额类型",
          align: "center",
          scopedSlots: { customRender: "quotaType" },
        },
        {
          title: "变更类型",
          align: "center",
          // dataIndex: 'tradeType',
          scopedSlots: { customRender: "changeType" },
        },
        {
          title: "变更数量tCO₂e",
          align: "center",
          dataIndex: "changeQuantity",
        },
        {
          title: "交易单价(元/吨)",
          align: "center",
          dataIndex: "monovalent",
        },
        {
          title: "交易金额(元)",
          align: "center",
          sorter: true,
          dataIndex: "amount",
        },
        // {
        //   title: "配额余额tCO₂e",
        //   align: "center",
        //   sorter: true,
        //   dataIndex: "",
        // },
        {
          title: "归属交易所",
          align: "center",
          sorter: true,
          dataIndex: "exchangeDict",
        },
        ,
        {
          title: "产品类型",
          align: "center",
          sorter: true,
          scopedSlots: { customRender: "productType" },
        },
        ,
        {
          title: "归属组织",
          align: "center",
          sorter: true,
          dataIndex: "organize",
        },
        ,
        {
          title: "变更日期",
          align: "center",
          sorter: true,
          dataIndex: "updateTime",
        },
        ,
        {
          title: "记录日期",
          align: "center",
          sorter: true,
          dataIndex: "createTime",
        },
        ,
        {
          title: "操作",
          align: "center",
          sorter: true,
          scopedSlots: { customRender: "action" },
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.availableQuota {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  .function {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .ant-btn-primary {
      background: #0c67ee;
    }
    .btn {
      margin-right: 6px;
      font-size: 14px;
    }
  }
  .total {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #77d7ff;
    background: rgba(119, 215, 255, 0.1);
    border-radius: 4px;
    padding: 6px 20px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #2d303b;
    .blue {
      color: rgb(40, 120, 255);
    }
    .black {
      font-size: 16px;
      font-weight: 700;
      color: #2d303b;
    }
  }
  .name {
    font-size: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    .anticon {
      font-size: 22px;
      margin-right: 6px;
    }
  }
  .val {
    font-size: 22px;
    margin-top: 2px;
    font-weight: 600;
  }
}
// 配额总览
.quotaOverview {
  background: url("@/assets/img/assets/bg_1.png");
  background-size: cover;
  padding: 20px;
  .quota {
    height: 80px;
    .top {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .bg {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: rgba(233, 237, 241, 0.2);
    }
    .title {
      font-size: 12px;
    }
    .h4 {
      font-size: 16px;
    }
    .val {
      margin-top: 6px;
      font-size: 12px;
    }
    .anticon {
      margin-right: 6px;
    }
  }
}
// 分配/交易
.distribution {
  display: flex;
  flex-direction: row;
  // width: 100%;
  padding: 0 20px;
  ul {
    padding: 0;
    width: 100%;
    margin-top: 10px;
    li {
      list-style: none;
      border-bottom: 1px solid #e7e7e7;
      padding: 10px 0px;
      display: flex;
      flex-direction: row;
      // justify-content: space-between;
      justify-content: flex-start;
      div {
        width: 50%;
        font-size: 12px;
      }
      .forecast {
        padding: 4px 10px;
        color: rgba(12, 103, 238, 0.5);
        margin-left: 10px;
        cursor: pointer;
        border-radius: 4px;
        border: 1px solid rgba(12, 103, 238, 0.5);
        .anticon {
          margin-left: 6px;
          font-weight: 600;
          font-size: 16px;
          color: rgba(12, 103, 238, 0.5);
        }
      }
    }
  }
}
</style>